import React, { Component } from 'react'
import "./Category.css"
import SearchInput from "../SearchInput/SearchInput"

import myaxios from "../../utils/myaxios"

export default class Category extends Component {
  state={
    categories:[],  // 返回来的菜单数据
    select_index: 0, // 当前选中左边的菜单
    categories_content: [], // 右边菜单渲染的内容
  }

  // 左边列表点击的时候
  handleItemClick = (e) => {
    let select_index = e.target.getAttribute("data-index")
    console.log(select_index)
    this.setState({
      // 点击左边的列表样式加到当前列表上
      select_index:parseInt(select_index),
      // 设置选中左边列表时 右边的内容也随之变化
      categories_content:this.state.categories[select_index].children
    })
  }
  // 右边图片点击的时候
  handleProductItemClick = (e) => {
    let cid = e.target.getAttribute("data-index");
    // console.log(e.target,cid)
    this.props.history.push("/goodList/" + cid);
  }


  // 获取分类菜单得数据
  getCategories = (params) => {
    myaxios
    .get("categories")
    .then(res=>{
      this.setCategories(res)
    })
    .catch(err=>{console.log(err)})
  }
  

  // 设置分类菜单得数据
  // is_storaged  代表之前是否已经缓存过
  setCategories = (res,is_storaged) => {
    // 缓存请求得数据
    let categories_cache = {}
      if(is_storaged){
        // 直接获取本地缓存中得数据
        categories_cache = JSON.parse(localStorage.getItem("categories_cache"));
      }else{
        categories_cache = {date:Date.now(),categories:res}
      }
      // 缓存到本地
      localStorage.setItem("categories_cache",JSON.stringify(categories_cache))
      this.setState({
        categories:res,
        // 请求右侧的数据
        categories_content: res[0].children,
      })
  }
  
  componentDidMount(){
    // 进来的时候 先判断本地缓存是否过期
    // 如果没还有得情况下 直接获取本地缓存
    let categories_cache = localStorage.getItem("categories_cache")
    // 如果本地缓存不为空
    if(categories_cache){
      // 判断本地缓存是否过期
      // 当地时间
      let current_time = Date.now();
      // 存储得时间
      let storage_time = JSON.parse(categories_cache).date;
      if(current_time-storage_time> 60*60*1000){
        // 一小时过期
        this.getCategories()
      }else{
        // 缓存没有过期
        // 第二个参数  代表是否已经缓存
        this.setCategories(JSON.parse(categories_cache).categories,true)
      }
    }else{
      this.getCategories()
    }
  }
  


  
  render() {
    return (
      <div className="yg-category">
        {/* 头部开始 */}
        <div className="yg-category-nav">
          <div className="category-nav">商品分类</div>
        </div>
        {/* 头部结束 */}

        {/* 搜索部分开始 */}
        <div className="yg-category-search">
          <SearchInput></SearchInput>
        </div>
        {/* 搜索部分结束 */}

        <div className="yg-category-content">
          <div className="content-left" onClick={this.handleItemClick}>
            {
              this.state.categories.map((v,index)=>{
                return  <div 
                          className={
                            this.state.select_index === index
                            ? "active left-item"
                            : "left-item"
                          }
                          data-index={index}
                          key={v.cat_id}
                          >
                          {v.cat_name}
                        </div>
              })
            }
          </div>
          <div className="content-right">
            {this.state.categories_content.map((v,i)=>{
              return (
                <div className="content-right-item" key={v.cat_id}>
                  {/* 二级菜单的标题开始 */}
                  <div className="right-item-title">
                    {" / "}
                    {v.cat_name}
                    {" / "}
                  </div>
                  {/* 二级菜单的标题结束 */}
                  <div 
                  className="product-list"
                  onClick={this.handleProductItemClick}
                  >
                    {v.children && v.children.map((v)=>{
                      return (
                        <div 
                          className="product-list-item"
                          key={v.cat_id}
                          data-index={v.cat_id}
                          >
                          <div className="imageWrapper">
                            <img src={v.cat_icon} data-index={v.cat_id} alt=""/>
                          </div>
                          <div className="item-title">
                            {v.cat_name}
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
}

